<template>
    <div id="dialog">
       <el-dialog
  :title="DialogData.title"
  :visible.sync="DialogData.show"
  width="30%"
  
  >
  <div class="formData">
       <el-form :model="formData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名" prop="pass">
    <el-input  v-model="formData.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="联系号码" prop="checkPass">
    <el-input  v-model="formData.telephone" autocomplete="off"></el-input>
  </el-form-item>
  
  <el-form-item label="邮箱" prop="age">
    <el-input v-model="formData.mailbox"></el-input>
  </el-form-item>
  <el-form-item label="所在省市" prop="age" >
     <!-- <el-input v-model="formData.address"></el-input> -->
      <div class="selectBox">
        <!-- sheng -->
        <el-select v-model="shengCode" @change="shengChange" placeholder="请选择省份">
          <el-option
            v-for="item in sheng"
            
            :key="item.adcode"
            :label="item.label"
            :value="item.adcode">
          </el-option>
        </el-select>
        <!-- shi -->
        <el-select v-model="shiCode" @change="shiChange" placeholder="请选择县市" v-if="shi.length">
          <el-option
            v-for="items in shi"
            
            :key="items.adcode"
            :label="items.label"
            :value="items.adcode">
          </el-option>
        </el-select>
        <!-- xian -->
        <el-select v-model="xianCode" @change="xianChange" placeholder="请选择区域" v-if="xian.length">
          <el-option
            v-for="ite in xian"
            
            :key="ite.adcode"
            :label="ite.label"
            :value="ite.adcode">
          </el-option>
        </el-select>
      </div>
  </el-form-item>

</el-form>
  </div>
  <span slot="footer" class="dialog-footer">
    <!-- <el-button @click="DialogData.show = false">取 消</el-button> -->
    <el-button type="primary" @click="subForm">立即申请</el-button>
  </span>
</el-dialog>
    </div>
</template>

<script>
  import CityMap from "../assets/CityMap"
    export default {
        props: {
            DialogData: Object,
            formData: Object
        },
        data() {
          return {
            shengCode:"",
            shiCode: "",
            xianCode: "",
            pp: "",
            ss: "",
            xx: ""
          }
        },
        computed: {
          options() {
            return CityMap
          },
          sheng() {
            let arr = []
            this.options.forEach(el => {
              if(el.adcode) {
                arr.push({
                  label: el.label,
                  adcode: el.adcode
                })
              }
            })
            return arr
          },
          shi() {
            let arr = []

            this.options.forEach( el => {
              if (el.adcode == this.shengCode) {
                 arr = el.children
              }
            })
            return arr
          },
          xian() {
            let arr = []
            this.shi.forEach( el => {
              if (el.adcode == this.shiCode) {
                  arr = el.children
              }
            })
            return arr
          },
          fullRess() {
              return `${this.pp}${this.ss}${this.xx}`
          }
        },
        watch: {
          shengCode() {
            this.shiCode = []
            this.xianCode = []
          },
          shiCode() {
            this.xianCode = []
          }
        },
        mounted () {
          
        },
        methods: {
            async subForm() {
              this.formData.address = this.fullRess
                let { username, telephone, address, mailbox } = this.formData
                //console.log(this.formData.address);
                
                this.formData.key = this.$key
                if (!username) {
                    this.$message.error("请输入姓名")
                    return false
                } else if (!telephone) {
                    this.$message.error("请输入手机号码")
                    return false
                } else if (!address) {
                    this.$message.error("请输入您的地址")
                    return false
                } else if (!mailbox) {
                    this.$message.error("请输入您的邮箱")
                    return false
                }  else {
                   let res = await this.$axios.post("/index/index/leave", this.formData)
                   //console.log(res);
                   let code = res.data.code
                   if (code == 202) {
                       this.$message.success("提交成功")
                       this.DialogData.show = false
                   } else {
                       this.$message.success("网络问题，请重试！")
                       this.DialogData.show = false
                   }
                }
            },

            // 选择区域变化
            shengChange( city ) {
              let self = this
              this.sheng.forEach( el => {
                if (el.adcode == self.shengCode) {
                    this.pp = el.label
                }
              })
              
            },
            shiChange( city ) {
              let self = this
              this.shi.forEach( el => {
                if (el.adcode == self.shiCode) {
                    this.ss = el.label
                }
              })
              
            },
            xianChange( city ) {
              let self = this
              this.xian.forEach( el => {
                if (el.adcode == self.shengCode) {
                    this.xx = el.label
                }
              })
              
            },
            
        },
    }
</script>

<style  >
.el-select-dropdown {
  z-index: 30000000 !important;
}
.selectBox {
  width: 100%;
  display: flex;
}
</style>